<template>
    <div class="list-wrapper">
        <top-nav></top-nav>
        <div class="container dashboard-container">
            <center>
                <el-row :gutter="20" v-for="(item,index) in rows" :key="index">
                    <el-col v-for="(items,idx) in item" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" :key="idx">
                        <div @click="answerQuestion(items.id)">
                            <el-card shadow="hover">{{items.name}}</el-card>
                        </div>
                    </el-col>
                </el-row>
            </center>
        </div>
    </div>
</template>

<script>
export default{
    name:'exam-list',
    data:()=>({
        list:[{name:'IT部门安排',id:1},{name:'人员配置请求',id:2},,{name:'任务安排',id:3}],
    }),
    methods:{
        answerQuestion(id){
            console.log(id)
			this.$router.push({
				path:'/exam/testing',
				query:{id}
			})
        }
    },
    computed:{
      rows(){
          let rows=[]
          this.list.forEach((item,index)=>{
              let idx=Math.floor(index/2)
              if(!rows[idx]){
                  rows[idx]=[]
              }
              rows[idx].push(item)
          })
          return rows
      }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
    margin:20px 40px;
}
.el-row {
    &:last-child {
        margin-bottom: 0;
    }
    .el-card{
        line-height:.5;
        margin-bottom: 20px;
        cursor:pointer;
    }
}
</style>
